<template>
	<view class="reward" :style="{'background':`url('${$util.img(image)}')`}">
		<!-- 顶部导航 -->
		<diyNavBar :value="'新人福利'" :fixed="true" color="none"></diyNavBar>
		<view class="price-title">
			新人专享<text class="price">{{getPrice}}元</text>
		</view>
		<view class="body-box">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="left">{{index + 1 }}</view>
				<view class="right">
					<view class="r_left">
						<view class="top">
							<text class="title">{{item.title}}</text>
							<text class="price">+{{item.price}}元</text>
						</view>
						<view class="bottom">{{item.context}}</view>
					</view>
					<view class="r_right" v-if="item.status == 0" @click="to(index)">去完成</view>
					<view class="r_right" v-if="item.status == 1" @click="setPrice(item)">领红包</view>
					<view class="r_right hover" v-if="item.status == 2">已完成</view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default{
		components:{diyNavBar,loadingCover},
		data() {
			return {
				dataList: [],
				img: '',
				num:1,
				image:'',
				getPrice:0
			}
		},
		onLoad() {},
		onShow() {
			this.getData();
			// #ifdef H5
			this.share();
			// #endif
		},
		methods: {
			getData() {
				this.$http.sendrequest('/NoviceRewards/NoviceRewardsList', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.dataList = res.data;
						this.getPrice = 0;
						this.dataList.forEach(item=>{
							this.getPrice += Number(item.price);
						})
						this.$refs.loadingCover.hide();
					}
				})
				this.$http.sendrequest('/index/yqimage').then(res=>{
					this.image = res.data
				})
			},
			to(index) {
				console.log('ubdex',index)
				switch (index) {
					case 0:
						this.$util.redirectTo('/pages/guide/guide')
						break;
					// case 1:
					// 	this.share();
					// 	// this.$util.redirectTo('/pages/hall/hall', {}, 'switchTab')
					// 	break;
					case 1:
						this.$util.redirectTo('/pages/hall/hall', {}, 'switchTab')
						break;
					case 2:
						this.$util.redirectTo('/pages/mywallet/mywallet')
						break;
				}
			},
			setPrice(item) {
				this.$http.sendrequest('/NoviceRewards/ClaimRewards', {
					id: item.id
				}, {
					tokenJudge: true,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) this.getData();
				})
			},
			share(){
				this.$http.sendrequest('/member/createSystemPoster', {}, {
					sendrequest: true
				}).then(v => {
					if (v.code == 1) {
						this.img = this.$http.newBaseUrl+ v.data[0].image_url;
						// #ifdef H5
						this.$wx.initJssdk({
							title:'新手任务',
							imgUrl:this.img
						},(res)=>{
							this.$http.sendrequest('/NoviceRecord/SharingAdd',{id:2,status:1},{tokenJudge:true}).then(res=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							})
						})
						// #endif
						// #ifdef APP
						uni.share({
							provider:'weixin',
							scene:'WXSceneTimeline',
							type:1,
							summary:`【ASRV任务】帮人忙，赚赏金！就来ASRV任务，复制链接，去浏览器中打开↓↓↓ ${'http://www.taojinzhuan1.com/h5/'}`,
							success:res=>{
								this.$http.sendrequest('/NoviceRecord/SharingAdd',{id:2,status:1},{tokenJudge:true}).then(res=>{})
							},
							fail:err=>{
								console.log("接口调用失败",err)
							}
						})
						// #endif
					}
				})
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reward {
		height: 100vh;
		width: 100vw;
		background-size: 100% 100% !important;
		font-family: PingFang SC;
		.price-title{
			width: 100%;
			font-size: 56rpx;
			color: #fff;
			text-align: center;
			position: relative;
			top: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.price{
				font-size: 70rpx;
			}
		}
		.body-box {
			margin: 0 30rpx;
			padding: 70rpx 30rpx 90rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;
			position: fixed;
			bottom: 70rpx;
			width: 690rpx;
			.item {
				display: flex;
				margin-bottom: 45rpx;

				.left {
					width: 34rpx;
					height: 34rpx;
					background: #FF6F30;
					border-radius: 50%;
					text-align: center;
					line-height: 34rpx;
					font-size: 20rpx;
					color: #fff;
					margin-right: 22rpx;
					margin-top: 6rpx;
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: calc(100% - 56rpx);

					.r_left {
						.top {
							.title {
								font-size: 26rpx;
								font-weight: bold;
								color: #000000;
							}

							.price {
								font-size: 24rpx;
								font-weight: bold;
								color: #FF6F30;
								margin-left: 14rpx;
							}
						}

						.bottom {
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
							margin-top: 12rpx;
						}
					}

					.r_right {
						width: 150rpx;
						height: 50rpx;
						background: linear-gradient(90deg, #E7301D, #F8B667);
						border-radius: 25rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
						line-height: 50rpx;
					}

					.hover {
						color: #999999;
						background: #DCDCDC;
					}
				}
			}

			.item:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>